<!doctype html>
<html>  
<head>  
  <meta charset="utf-8">  
  <title>图表展现</title>  
  <script src="static/js/d3.v3.min.js"></script>
  <style type="text/css">
	.tooltip{  
		font-family:simsun;  
		font-size:16px;  
		width:120px;
		height:auto;  
		position:absolute; 
		text-align:center;  
		border-style:solid;  
		border-width:1px;  
		background-color:white;  
		border-radius:5px;    
	}  
	.axis path,
	.axis line{
		fill: none;
		stroke: black;
		shape-rendering: crispEdges;
	}
	.axis text {
		font-family: sans-serif;
		font-size: 11px;
	}
	.MyRect {
		fill: steelblue;
	}
	.MyText {
		fill: white;
		text-anchor: middle;
		font-size: 8px;
	}
		
	.inner_line path,
 	.inner_line line {
	 	fill: none;
	 	stroke:#E7E7E7;
	 	shape-rendering: crispEdges;
 	}
 	.legend{font-size: 12px; font-family:Arial, Helvetica, sans-serif}
  </style>
</head>
<body>
<script type="text/javascript">
var areaList = [];
function getSessionCountByAreaName(areaName) {
	var sessionCount = 0;
	for(var i = 0; i < areaList.length; i++) {
		if(areaList[i].f_ms_areaname==areaName) {
			sessionCount = areaList[i].f_ms_sessioncount;
			break;
		}
	}
	return sessionCount;
}
var socket = new WebSocket('ws://localhost:8080/gd_hqjc_admin/monitor_session.do'); 
socket.onopen = function(event) {
	// 监听消息
	socket.onmessage = function(event) { 
		console.log('Client received a message',event.data); 
		areaList = JSON.parse(event.data);
		console.log('Client received a message',areaList[0].f_ms_areaname); 
		drawMap();
	}; 

	// 监听Socket的关闭
	socket.onclose = function(event) { 
		console.log('Client notified socket has closed',event); 
	}; 
};
</script>
<script type="text/javascript">
	var width  = 800;
	var height = 800;
	
	var svg = d3.select("body").append("svg")
	    .attr("width", width)
	    .attr("height", height)
	    .append("g")
	    .attr("transform", "translate(0,0)");
	
	svg.append("text")  
    .text("浙江全省iTV在线用户分布图")  
    .attr("x",(width/3))  
    .attr("y",50)  
    .attr("font-size","18px")  
    .attr("font-weight","bold")  
    .attr("text-anchor","middle")  
    .attr("fill","black"); 
	
	var projection = d3.geo.mercator()
						.center([120,30])
						.scale(5000)
    					.translate([200, 200]);
	//提示框 （注意设置提示框的绝对路径）  
    var tooltip =d3.select("body")  
                    .append("div")  
                    .attr("opacity",0.0)  
                    .attr("class","tooltip");  
	
	var path = d3.geo.path().projection(projection);
	var color = d3.scale.category20();
	function drawMap() {
		d3.json("static/js/d3_area/mapdata/geometryProvince/33.json", function(error, root) {
			if (error) 
				return console.error(error);
			
			svg.selectAll("body")
				.data( root.features )
				.enter()
				.append("path")
				.attr("stroke","#000")
				.attr("stroke-width",1)
				.attr("d", path )
				.attr("fill", function(d,i){
					var c = getSessionCountByAreaName(d.properties.name);
					var r = 255;
					var g = 255;
					var b = 255;
					if(c<5000) { 
						var bfb = 1-c/5000;
						r = parseInt(255*bfb);
						g = r;
						b = 255;
					} else {
						r=0;
						g=0;
						b=255;
					}
					return d3.rgb(r,g,b);
				})
				.on("mouseover",function(d,i){
	                //d3.select(this).attr("fill","rgb(230,230,230)");
	                tooltip.html(d.properties.name+":"+getSessionCountByAreaName(d.properties.name))
	                .style("left",(d3.event.pageX)+"px")  
	                .style("top",(d3.event.pageY+20)+"px")  
	                .style("opacity",1.0);  
	            })
	            .on("mouseout",function(d,i){
	                //d3.select(this).attr("fill",color(i));
	                tooltip.style("opacity",0.0);  
	            });
			
			svg.selectAll("body")  
		    .data(root.features)  
		    .enter()  
		    .append("text")
		    .attr("transform",function(d,i) {//设置各个文本（省份名称）显示的文字  
		         return "translate("+(path.centroid(d)[0]-10)+","+ path.centroid(d)[1]+")";                
		    })
		    .text(function(d) {//显示省名  
		    	return d.properties.name;  
		    })
		    .attr("font-size",10);
		});
	}
	drawMap();
</script>
</body>  
</html>  